<template>
  <TreeTableLayout>
    <template #tree>
      <Tree @query="doQuery" :gatewayType="-1"></Tree>
    </template>
    <template #table>
      <RightTableLayout :slotName="['search', 'table', 'pagination']">
        <template #search>
          <Query :columns="columns" @query="doQuery"></Query>
        </template>
        <template #table>
          <el-table :empty-text="i18n.fy.nodata" :data="data.tableData" border v-loading="data.loading" :element-loading-text="i18n.fy.loading">
            <el-table-column prop="gatewayId" :label="i18n.fy.网关 + 'ID'" align="center" width="220" />
            <el-table-column prop="imei" :label="i18n.fy.电表电量编号" align="center" />
            <el-table-column prop="totalPowerConsumption" :label="i18n.fy.运行电量" width="220" :show-overflow-tooltip="true" />
            <el-table-column prop="updatedAt" :label="i18n.fy.操作时间" width="220">
              <template #default="scope">
                {{ scope.row.updatedAt.replace("T", " ") }}
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template #pagination>
          <el-pagination @size-change="onChanSize" @current-change="onChanPage" v-model:current-page="data.queryForm.page" v-model:page-size="data.queryForm.limit" :total="data.total" />
        </template>
      </RightTableLayout>
    </template>
  </TreeTableLayout>
</template>

<script setup>
defineOptions({ name: "DeviceTest" });
import RightTableLayout from "@/views/workbench/components/RightTableLayout.vue";
import TreeTableLayout from "@/views/workbench/components/TreeTableLayout.vue";
import Tree from "@/components/tree.vue";
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

import { getDeviceTestList } from "@/api/wiredmanageApi";

let columns = reactive({
  userName: { label: i18n.fy.用户名, queryValue: "" },
  operation: { label: i18n.fy.操作事项, queryValue: "" },
  createTime: { type: "date", label: i18n.fy.创建时间, queryValue: "" },
});

let data = reactive({
  queryForm: {
    page: 1,
    limit: 100,
  },
  tableData: [],
  total: 0,
  dialog: false,
  form: {},
  rules: {
    name: [{ required: true, message: "请输入姓名", trigger: "change" }],
    role: [{ required: true, message: "请选择岗位", trigger: "change" }],
  },
});

const reQueryForm = () => {
  // 重置查询表单
  data.queryForm = {
    page: 1,
    limit: 100,
  };
};

const currentChange = (page) => {
  pageData.queryForm.page = page;
  getList();
};

const sizeChange = (size) => {
  data.queryForm.page = size;
  getList();
};
// 新增
const add = () => {};
// 编辑
const edit = (row) => {};
// 修改分页数
const onChanSize = (e) => {
  data.queryForm.page = 1;
  data.queryForm.limit = e;
  getList();
};
// 修改分页
const onChanPage = (e) => {
  data.queryForm.page = e;
  getList();
};
// 删除
const del = (row) => {
  ElMessageBox.confirm("确认删除?", "提示").then(() => {});
};
let formRef = ref(null);
// 提交新增/编辑表单
const submit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
    }
  });
};
// 获取表格数据
const getList = async (params) => {
  data.loading = true;
  const res = await getDeviceTestList(params);
  data.tableData = res.data;
  data.total = res.total;
  data.loading = false;
};

let deviceFid = ref();
const doQuery = (params) => {
  if (params.deviceFid) {
    deviceFid.value = params.deviceFid;
  }
  getList({ ...params, deviceFid: deviceFid.value });
};

const showType = (type) => {
  if (type == -1) return "系统";
  if (type == 0) return "云平台";
  if (type == 1) return "云产品";
  if (type == 2) return "云设备";
};
onBeforeMount(() => {
  getList({});
});
</script>

<style lang="scss" scoped>
.available1 {
  color: orangered;
}
</style>
